<template>
  <view class="padding-sm">
    <view class="login-form">
      <form>
        <view class="cu-form-group">
          <input placeholder="请输入手机号码" name="phone" v-model="formData.phone"></input>
          <view class="cu-capsule radius">
            <view class='cu-tag bg-gray '>
              +86
            </view>
            <view class="cu-tag line-grey">
              中国大陆
            </view>
          </view>
        </view>
        <view class="cu-form-group">
          <input placeholder="请输入验证码" name="code" v-model="formData.code"></input>
          <uni-countdown v-if="showCode" :show-hour="false" color="#8799a3" :show-minute="false" :show-day="false"
            :second="timeupSecond" @timeup="timeup" />
          <button class="cu-btn line-blue xs" v-else @click="getCode">验证码</button>
        </view>
      </form>
      <view class="text-sm margin-top-sm">
        <text class="text-gray">未注册的手机号验证后自动创建账号</text>
      </view>
    </view>
    <view class="login-btn">
      <button class="cu-btn block bg-blue margin-tb-sm lg" @click="submitForm">登陆/注册</button>
    </view>
  </view>
</template>

<script>
  // 1. 按需导入 mapMutations 辅助函数
  import {
    mapMutations
  } from 'vuex'

  export default {
    data() {
      return {
        showCode: false,
        timeupSecond: 60,
        formData: {
          phone: "",
          code: ""
        },
      }
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateIsLogin', 'redirectPage', 'updateRedirectInfo',
         'updatePatientInfo'
      ]),
      // 校验手机号
      validPhone() {
        const phone = this.formData.phone;
        if (!phone) {
          return false;
        }
        const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        return regPhone.test(phone);
      },
      // 校验code
      validCode() {
        const code = this.formData.code;
        if (!code) {
          return false;
        }
        const regCode = /^\d{6}$/;
        return regCode.test(code);
      },
      // 获取到CODE
      async getCode() {
        // 验证手机号
        if (!this.validPhone()) {
          uni.$showMsg('手机号格式错误');
          return;
        }
        // 发送验证码
        const requestData = {
          phone: this.formData.phone
        }
        const {
          data: res
        } = await uni.$http.get('/sendCode', requestData);
        if (res.code !== 200) return uni.$showMsg("短信发送失败");

        // 短信发送成功
        uni.$showMsg('验证码已发送，请注意查收');
        this.showCode = true;
      },
      // 提交信息
      async submitForm() {
        // 校验表单
        if (!this.validPhone()) {
          uni.$showMsg('手机号格式错误');
          return;
        }
        if (!this.validCode()) {
          uni.$showMsg('验证码格式错误');
          return;
        }
        // 校验通过后进行授权
        const {
          data: res
        } = await uni.$http.post('/sms/auth', this.formData);
        if (res.code !== 200) return uni.$showMsg("登陆失败");
        // console.log(res.data);
        // console.log(res.data.patientInfo);
        // console.log(res.data.user);
        // 解构用户信息
        const {
          id,
          phone,
          avatar,
          nickname
        } = res.data.user;
        // 解构患者信息
        const patientInfo = {
          patientId: res.data.patientInfo.id,
          name: res.data.patientInfo.name,
          phone: res.data.patientInfo.phone
        };
        // 更新用户信息
        this.updateUserInfo({
          id,
          phone,
          avatar,
          nickname
        });
        // 更新患者信息
        this.updatePatientInfo(patientInfo);
        // 登陆校验信息
        // this.updateIsLoginout(0);
        this.updateIsLogin(1);
        this.redirectPage();
      },
      // 倒计时时间到
      timeup() {
        this.showCode = false;
      }
    }
  }
</script>

<style lang="scss">
  .login-form {
    margin-top: 10px;
    margin-bottom: 5px;
  }
</style>